<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="dataForm.customerName + '--配置管家' + dataForm.id" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()"  >
            {{ $t('common.confirmButton') }}</el-button>
          <el-button @click="goBack()">{{ $t('common.cancelButton') }}</el-button>
        </div>
      </div>
      <div class="main">

        <el-table :data="list" size='mini' ref="dragTable" :row-key="row => row.index" v-if="refreshTable">
          <el-table-column type="index" width="50" label="序号" align="center" />

          <el-table-column prop="type" label="选择类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.enCode" :label="item.fullName" :value="item.enCode" />
              </el-select>
            </template>
          </el-table-column>


          <el-table-column prop="userId" label="选择管家">
            <template slot-scope="scope">
              <el-select v-model="scope.row.userId" placeholder="请选择管家">
                <el-option v-for="item in useroptions" :key="item.id" :label="item.realName" :value="item.id" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="50">
            <template slot-scope="scope">
              <el-button class="JNPF-table-delBtn" size="mini" type="text"
                @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-actions" @click="addHandle()">
          <el-button type="text" icon="el-icon-plus">新建</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

import request from '@/utils/request'


export default {
  data() {
    return {
      dataForm: {
        customerName: '',
        id :0,
      },

      list: [],
      refreshTable: true,
      options: [

      ],

      useroptions: [
      ]
    }
  },
  created() {


  },
  methods: {
    init(id, row) {

      this.dataForm.id = id || 0;
      this.dataForm.customerName = row.customerName;
      this.$nextTick(() => {

        //获取字典中的类型
        this.$store.dispatch('base/getDictionaryData', { sort: 'allotCustomerType' }).then(res => {
          this.options = res.map(item=>{
            item.enCode=parseInt(item.enCode)
            return item
          })
          console.log(this.options)
        }).then(() => {
          this.initData();

        }).then(()=>{
            this.customerManage();

        })


      })

    },
    goBack() {
      this.$emit('refresh')
    },
    initData() {

      let query = {
        customerId: this.dataForm.id
      };
      request({
        url: `/api/Jiushi/Customeruser`,
        method: 'get',
        data: query
      }).then(res => {

        this.list = res.data.list

      })
    },
    customerManage() {
    let query = {

      };
      request({
        url: `/api/Permission/Users/GetListByRoles`,
        method: 'get',
        data: query
      }).then(res => {

        this.useroptions = res.data.list

      })
    },

    dataFormSubmit() {


        request({
					  url: `/api/Jiushi/Customeruser/allot/${this.dataForm.id}`,
							method: 'Post',
							data: {id: this.dataForm.id , json:JSON.stringify(this.list) }
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false;
									this.$emit('refresh', true);
								}
							})


      })
    },

    handleDel(index, row) {
      this.list.splice(index, 1)
    },
    addHandle(row) {
      let index = this.list.length, item = {}
      // if (!row) {
        item = {
          type: 1, userId: '', customerId: this.dataForm.id
        }
      // } else {
      //   item = {
      //     type: row.type,
      //     userId: row.userId,
      //     customerId: this.dataForm.id,
      //   }
      // }
      this.list.push(item)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 0 0 10px;
}
</style>
